<!-- AccumulatePointsCollect_Frame.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
		<title>积分汇总frame</title>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			body {
				padding: 10px;
			}
			.loadFailure {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 90%;
			}
			.loadFailure img {
				max-width: 100%;
				display: inline-block;
			}
			.noSign {
				left: 0;
				top: 0;
				margin: 0 auto;
				text-align: center;
				padding: 40px 20px;
				width: 90%;
            }
			.noSign img {
					max-width: 100%;
					display: inline-block;
			}
			.content-div {
				background-color: white;
			}
			.top-chart-div {
				height: 300px;
			}
			.content-detail {
				padding: 10px 0;
			}
			.right-cell {
				overflow: hidden;
			}
			.left-cell {
				overflow: hidden;
			}
			.sub-left-div {
				width: 40%;
				height: 60px;
			}
			.sub-right-div {
				width: 60%;
				height: 60px;
			}
			.left-cell .sub-left-div {
				float: right;
				text-align: right;
			}
			.left-cell .sub-right-div {
				float: left;
			}
			.right-cell .sub-left-div {
				float: left;
				text-align: left;
			}
			.right-cell .sub-right-div {
				float: right;
			}
			.left-cell .sub-left-title {
				text-align: left;
			}
			.right-cell .sub-left-title {
				text-align: right;
			}
			.sub-left-title {
				font-size: 14px;
				/*color: purple;*/
				line-height: 60px;
				margin: 0;
				padding: 0 10px;
			}
			.left-cell .sub-tag-div {
				float: right;
			}
			.right-cell .sub-tag-div {
				float: left;
			}
			.sub-tag-div {
				height: 48px;
				/*border: 1px solid purple;*/
				border-radius: 24px;
				width: 80%;
				margin: 5px;
			}
			.sub-chart {
				width: 40px;
				height: 40px;
				border-radius: 20px;
				background-color: #ededed;
			}
			.left-icon {
				width: 24px;
				height: 24px;
				margin-top: 8px;
				margin-left: 8px;
			}
			.right-cell .sub-title-div {
				margin-left: 48px;
				text-align: left;
			}
			.left-cell .sub-title-div {
				margin-right: 48px;
				text-align: right;
			}
			.right-cell .sub-chart {
				float: left;
				margin-left: 4px;
				margin-top: 4px;
			}
			.left-cell .sub-chart {
				float: right;
				margin-right: 4px;
				margin-top: 4px;
			}
			.sub-title {
				font-size: 12px;
				color: #666;
				margin: 0;
				line-height: 16px;
				margin-top: 6px;
			}
			.sub-tag-span {
				/*color: purple;*/
			}
			.fen-ge-div {
				height: 40px;
				padding: 4px 0;
			}
			.fen-ge-left {
				width: 49%;
				height: 32px;
				float: left;
				border-right: 1px solid #666;
			}
		    
			.boder0{
			  border: 1px solid #aa67da;
			}
			.boder1{
			  border: 1px solid #66cccc;
			}
			.boder2{
			  border: 1px solid #f16bae;
			}
			.boder3{
			  border: 1px solid #ff9900;
			}
			.boder4{
			  border: 1px solid #4ed3c0;
			}
			.boder5{
			  border: 1px solid #1296db;
			}
			.boder6{
			  border: 1px solid #a3d146;
			}
			.font_color0{
			     color: #aa67da;
			}
			.font_color1{
			      color: #66cccc;
			}
			.font_color2{
			      color: #f16bae;
			}
			.font_color3{
			     color: #ff9900;
			}
			.font_color4{
			     color:#4ed3c0;
			}
			.font_color5{
			      color: #1296db;
			}
			.font_color6{
			     color:#a3d146;
			}
			
			
			
			
		</style>
	</head>
	<body>
		<div class="content-div" style="display: none">
			<div id="top_chart" class="top-chart-div" ></div>
			<div class="content-detail">
				<!--<div class="right-cell">
					<div class="sub-left-div">
						<p class="sub-left-title">
							资源
						</p>
					</div>
					<div class="sub-right-div">
						<div class="sub-tag-div">
							<div id="resource_chart" class="sub-chart"></div>
							<div class="sub-title-div">
								<p class="sub-title">
									当前发布<span class="sub-tag-span">4</span>个
								</p>
								<p class="sub-title">
									已学习<span class="sub-tag-span">2</span>个
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="fen-ge-div">
					<div class="fen-ge-left"></div>
					<div class="fen-ge-right"></div>
				</div>
				<div class="left-cell">
					<div class="sub-left-div">
						<p class="sub-left-title">
							调查
						</p>
					</div>
					<div class="sub-right-div">
						<div class="sub-tag-div">
							<div id="research_chart" class="sub-chart"></div>
							<div class="sub-title-div">
								<p class="sub-title">
									公有<span class="sub-tag-span">5</span>项
								</p>
								<p class="sub-title">
									参与<span class="sub-tag-span">3</span>项
								</p>
							</div>
						</div>
					</div>
				</div>
				<div class="fen-ge-div">
					<div class="fen-ge-left"></div>
					<div class="fen-ge-right"></div>
				</div>
				<div class="right-cell">
					<div class="sub-left-div">
						<p class="sub-left-title">
							提问答疑
						</p>
					</div>
					<div class="sub-right-div">
						<div class="sub-tag-div">
							<div id="resource_chart" class="sub-chart">
								<img class="left-icon" src="../../image/icon_yiwen.png">
							</div>
							<div class="sub-title-div">
								<p class="sub-title">
									积分提问<span class="sub-tag-span"></span>
								</p>
								<p class="sub-title">
									热心解答<span class="sub-tag-span">8</span>次
								</p>
							</div>
						</div>
					</div>
				</div>-->
			</div>
		
		</div>
		<div class="noSign" hidden="hidden" id="noData">
			<img src="../../image/icon_no_data.png" width="60%">
			<p class="font16 top_15 base_dark_grey" >
				暂无数据
			</p>
		</div>
		<div class="loadFailure" hidden="hidden" id="noNet">
			<img src="../../image/icon_img01.png" width="60%">
			<p class="" >
				数据加载失败
			</p>
			<p>
				请检查您的网络
			</p>
			<button type="button" class="mui-btn mui-btn-outlined" onclick="refreshData()">
				重新加载
			</button>
		</div>
	</body>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/echarts_pie.min.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/AccumulatePoints.js"></script>
	<script type="text/javascript">
	    var all_num="";
		apiready = function() {
		    showProgress();
			loadData();
		}
		
		//刷新数据
		function refreshData() {
			$('#noNet').hide();
			showProgress();
			loadData();
		}
		//从网络获取数据
		function loadData() {
			var param = {
//				jid:158,
//	            uid:119039,
//	            cid:14533,
//	            pid:3606,
	            jid : $api.getStorage('cfnetppjxid'),
				uid: api.pageParam.uid,
				cid:api.pageParam.cid,
				pid:api.pageParam.pid,
			};
//			var url_getUserPointStatistics = "http://base.cfnet.org.cn/index.php/points/getpoints/getUserPointStatistics?jid=158&uid=119039&cid=14533&pid=3606"
			
			cfnetppPOST(url_getUserPointStatistics, param, false, function(data, status) {
			
				hideProgress();
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					$('#noNet').hide();
					if (data.code == 200) {
						$('#noData').hide();
						var list = data.data;
						$('.content-div').show();
						setupTopChart(data.statistics);
						SetUI(list)
					} else {
						$('.content-div').hide();
						$('#noData').show();
						
					}
				} else {
					$('#noNet').show();
				}
			});
		}
        //显示在html上
		function SetUI(list) {
			var data = returnUserPointStatisticsDownData(list);
			var downStr="";
			for (var i = 0; i < data.length; i++) {
			     if(data.length>1&&i!=(data.length-1)){
			      downStr= '<div class="fen-ge-div">'+
					      '<div class="fen-ge-left"></div>'+
					      '<div class="fen-ge-right"></div>'+
				          '</div>';
			     }else{
			      downStr= '';
			     }
				var directionStr = judgeDoubleStr(i + 1);
				var boder_color=judgeTypeReturnColor(data[i]);
				var tyepstr=TypeReturnStr(data[i],i,boder_color);
				$(".content-detail").append(
				        '<div class="'+directionStr+' font_color'+boder_color+'">'+
					'<div class="sub-left-div">'+
						'<p class="sub-left-title">'+
							data[i].content_type+
						'</p>'+
					'</div>'+
					'<div class="sub-right-div">'+
						'<div class="sub-tag-div boder'+boder_color+'">'+
							tyepstr+
					'</div>'+
				'</div>'+
				downStr        
				)
				if(data[i].content_type!='提问答疑'){
				  setupChart(i,data[i].partakenum,data[i].allnum,boder_color)
				}
				
			}
		}
		
		//获取用户总积分
		function getUserAllPointsData(){
			var param = {
				jid : $api.getStorage('cfnetppjxid'),
				uid: $api.getStorage('cfnetppuid'),
				sjid : $api.getStorage('cfnetppjid'),//实习 jid
			};
		   
			cfnetppPOST(url_getUserAllPoints, param, false, function(data, status) {
				if (status == 'success') {
					$('#noNet').hide();
					if (data.code == 200) {
						
						all_num=data.point;
					} else {
						
					}
				} else {
					
				}
			});
		}
		
        //设置顶部顶部echarts图
		function setupTopChart(list) {
			var data = returnTopData(list);
			var myChart = echarts.init(document.getElementById('top_chart'));
		
			myChart.setOption({
				tooltip : {
					trigger : 'item',
					formatter : "{d}% <n/>{a} <br/>{b} : {c}积分"
				},
				calculable : false,
				series : [{
					name : '',
					type : 'pie',
					radius : [40, 70],
					center : ['50%', '50%'],
					roseType : 'radius',
					data : data,
					
				}]
			});
		}
        //设置底部echarts图
		function setupChart(i,num,allnum,boder_color){
		    var true_rate = parseInt((num / allnum) * 100) + '%';
			var myChart = echarts.init(document.getElementById('resource_chart' + (i + 1) + ''));
			var colorArr=['#aa67da','#66cccc','#f16bae','#ff9900','#4ed3c0','#1296db','#a3d146'];
			myChart.setOption({
				title: {
			        text: true_rate,
			        x: 'center',
			        y: 'center',
			        textStyle:{
				        //文字颜色
				        color:colorArr[boder_color],
				        //字体风格,'normal','italic','oblique'
				        fontStyle:'normal',
				        //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
				        fontWeight:'bold',
				        //字体系列
				        fontFamily:'sans-serif',
				        //字体大小
				　　　　        fontSize:10,
				    }
			    },
				series: [
				    {
				        type:'pie',
				        radius: ['85%', '100%'],
//				        avoidLabelOverlap: true,
                        avoidLabelOverlap : false,
				        hoverAnimation :false,
				        label: {
				            normal: {
				                show: true,
				                position: 'center'
				            },
				            emphasis: {
				                show: true
				            }
				        },
				        labelLine: {
				            normal: {
				                show: true
				            }
				        },
				        data:[{
		                value : allnum-num
	                      }, {
		                value : num
	                    }],
				        color:['#e0e0e0', colorArr[boder_color]]
				    }
				]
			});
		}
	</script>
</html>